<template>
    <template v-if="!openFolder">
        <div class="folders">
            <div class="folder" @click="openFolderEvent(item)" @contextmenu.prevent="rightClickEvent($event, item)"
                v-for="item in videoFolders" :key="item" :title="item.name">
                <div class="folderIcon">
                    <Folder></Folder>
                </div>
                <div class="folderName">
                    {{ item.name }}
                </div>
            </div>
            <div class="folder" @click="AddFolder">
                <div class="folderIcon">
                    <AddFolderCon></AddFolderCon>
                </div>
                <div class="folderName">
                    添加
                </div>
            </div>
        </div>
    </template>
    <template v-else>
        <div class="backFolder" @click="closeFolderEvent" title="返回">
            <Folder :width="24" :height="24"></Folder>
            <span>···</span>
        </div>
        <div class="loading" v-show="videos.length == 0">
            <img :src="LoadingImg" alt="" class="loadingImg" v-if="message == 'loading'">
            <EmptyVideo v-else :size="100"></EmptyVideo>
        </div>
        <div v-if="displayMethod == 'card'" class="videos cardVideo">
            <div :class="{ videoCard: true, active: i.uid == playVideoId }" v-for="i in videos" :title="i.name" :key="i"
                @click="playVideo(i)">
                <videoLogo v-show="i.uid != playVideoId"></videoLogo>
                <videoPlay v-show="i.uid == playVideoId"></videoPlay>
                <h1 class="titleVideo">{{ i.name }}</h1>
            </div>
        </div>
        <div v-else class="videos listVideo">
            <div :class="{ videoList: true, active: i.uid == playVideoId }" v-for="i in videos" :title="i.name" :key="i"
                @click="playVideo(i)">
                <div class="title">
                    {{ i.name }}
                </div>
                <div class="logo">
                    <videoLogo v-show="i.uid != playVideoId" :size="25"></videoLogo>
                    <videoPlay v-show="i.uid == playVideoId" :size="25"></videoPlay>
                </div>
            </div>
        </div>
    </template>
    <div ref="menu" class="menu">
        <div class="menuItem" @click="Delete(selectFolder)">删除</div>
        <div class="menuItem" @click="AddFolder">新增</div>
        <hr>
        <div class="menuItem" @click="Rename">重命名</div>
    </div>
    <div class="model" v-if="model">
        <div class="modelBox">
            <div class="title">重命名</div>
            <div class="inputBox">
                <input type="text" class="input" v-model="renameName.name" />
            </div>
            <div class="btns">
                <button @click="cancel" class="btn">取消</button>
                <button @click="confirm" class="btn">确定</button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Folder from '@renderer/components/icons/folder.vue'
import AddFolderCon from '@renderer/components/icons/addFolder.vue'
import LoadingImg from '@renderer/assets/loading.webp'
import videoLogo from '@renderer/components/icons/videoLogo.vue'
import videoPlay from '@renderer/components/icons/videoPlay.vue'
import HomeBodyHooks from './index'
import { ref, onMounted } from 'vue'
import EmptyVideo from '@renderer/components/icons/emptyVideo.vue'
const selectFolder = ref({})
let { videos, displayMethod, playVideoId, openFolder,
    videoFolders, message, myApi, ipcRenderer, setStoreData,
    AddFolder, Delete,
    openFolderEvent, closeFolderEvent, changeSorting
} = HomeBodyHooks()
const menu: any = ref(null)
const $emits = defineEmits(['PlayInfo'])
const renameName = ref({}) as any
let oName = ''
const rightClickEvent = (e, item) => {
    renameName.value = item
    oName = item.name
    selectFolder.value = item
    e.preventDefault()
    // 获取当前鼠标位置
    const x = e.clientX
    const y = e.clientY
    menu.value!.style.display = 'block'
    menu.value!.style.left = `${x}px`
    menu.value!.style.top = `${y}px`
    // 判断menu边界问题
    if (x + menu.value!.offsetWidth > window.innerWidth) {
        menu.value!.style.left = `${x - menu.value!.offsetWidth}px`
    }
    if (y + menu.value!.offsetHeight > window.innerHeight) {
        menu.value!.style.top = `${y - menu.value!.offsetHeight}px`
    }
}
const closeMenu = () => {
    menu.value!.style.display = 'none'
}
const playVideo = (item: any) => {
    playVideoId.value = item.uid
    $emits('PlayInfo', { item, videos: videos.value })
}
const model = ref(false)
const Rename = () => {
    model.value = true
}
const cancel = () => {
    renameName.value.name = oName
    model.value = false
}
const confirm = () => {
    model.value = false
    if (!renameName.value.name) {
        renameName.value.name = oName
    } else {
        ipcRenderer.send('update-storage', JSON.stringify(setStoreData.$state), 'setStoreData')
    }
}

onMounted(() => {
    myApi.value = window.api
})
defineExpose({
    changeSorting,
    closeMenu
})
</script>

<style scoped lang="scss">
.videos {
    width: 100%;
    overflow: auto;
    box-sizing: border-box;
    @include mixin.scroll_bar();
    overflow-x: hidden;
    padding: 5px;

    .active {
        transition: all 0.3s;
        box-shadow: 0 0 5px 2px #29f !important;
    }
}

.cardVideo {
    grid-gap: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    padding: 10px 5px;
    box-sizing: border-box;
    align-items: center;
    justify-items: center;

    .videoCard {
        transition: all 0.3s;
        width: 100%;
        height: 150px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        @include mixin.box_shadow();

        .titleVideo {
            width: 100%;
            background-color: #24242482;
            position: absolute;
            z-index: 5;
            bottom: 0;
            left: 0;
            padding: 2px 5px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            box-sizing: border-box;
            font-size: 12px;
        }

        &:hover {
            box-shadow: 0 0 5px 2px #29f !important;
        }
    }
}

.listVideo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    padding: 10px 5px;
    box-sizing: border-box;
    align-items: center;
    justify-items: center;
    gap: 5px;

    .videoList {
        transition: all 0.3s;
        padding: 5px 8px;
        box-sizing: border-box;
        width: 100%;
        cursor: pointer;
        border-radius: 5px;
        @include mixin.box_shadow();
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr 60px;
        align-items: center;

        .title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .logo {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        &:hover {
            box-shadow: 0 0 5px 2px #29f !important;
        }
    }
}

.folders {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    box-sizing: border-box;
    padding: 10px 5px;

    .folder {
        width: 100%;
        cursor: pointer;
        @include mixin.box_shadow();
        padding: 5px;
        overflow: hidden;

        .folderName {
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 13px;
            font-family: '微软雅黑';
            font-weight: 500;
        }

        .folderIcon {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        &:hover {
            background-color: #1e1e1e23;
        }
    }
}


.backFolder {
    padding: 5px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 5px;
    @include mixin.box_shadow();
    transition: all 0.3s;
    gap: 5px;
    font-size: 20px;

    &:hover {
        background-color: #1e1e1e23;
    }
}

.loading {
    padding: 25px 10px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    @include mixin.box_shadow();
    transition: all 0.3s;
    gap: 5px;
    text-align: center;

    .loadingImg {
        width: 80px;
    }
}

.menu {
    width: 100px;
    position: fixed;
    top: 100px;
    left: 100px;
    z-index: 100;
    background-color: #251f2bd4;
    border: 2px solid #b1b1b153;
    color: #fff;
    border-radius: 5px;
    overflow: hidden;
    display: none;

    .menuItem {
        margin: 2px;
        text-align: center;
        cursor: pointer;
        font-size: 15px;
        transition: all 0.3s;
        border-radius: 10px;
        display: flex;
        gap: 4px;
        justify-content: center;
        align-items: center;
        padding: 1px 2px;

        &:last-child {
            border-bottom: none;
        }

        &:hover {
            background-color: #1961fe;
            color: #fff;
        }
    }

    hr {
        border-color: #b1b1b153;
    }
}

.folderEmpty {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    @include mixin.box_shadow();
}

.model {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: #80808055;
    top: 0;
    left: 0;

    .modelBox {
        width: 300px;
        position: fixed;
        z-index: 100;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--text);
        background-color: var(--back);
        border-radius: 5px;
        padding: 10px;
        box-sizing: border-box;
        @include mixin.box_shadow();

        .title {
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            margin: 10px 0;
        }

        .inputBox {
            margin: 10px 0;

            input {
                border-radius: 5px;
                width: 100%;
                border: none;
                outline: none;
                text-align: center;
                border-bottom: 2px solid #0069d2;
                padding: 5px;
                box-sizing: border-box;
                color: var(--text);
                background-color: var(--back);
            }
        }

        .btns {
            margin-top: 10px;
            display: flex;
            justify-content: right;
            align-items: center;

            .btn {
                padding: 3px 10px;
                border-radius: 5px;
                cursor: pointer;
                margin: 0 5px;


                &:nth-child(1) {
                    background-color: red;
                }

                &:nth-child(2) {
                    background-color: #0060fa;
                }
            }
        }
    }
}
</style>